<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="../css/mui.css"/>
    <style type="text/css">
    	#tupian{
    		width: 50px;
    		height: 50px;
    		
    	}
    	#tupian img{
    		width: 100%;
    	}
    	#lis{
    		display: flex;
    	}
    	#right{
    		padding-left: 5px;
    	}
    	
    </style>
</head>
<body>
    <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">内地音乐</h1>
    </header>
    
     <!--下拉刷新容器-->
    <div id="refreshContainer" class="mui-content mui-scroll-wrapper">
      <div class="mui-scroll">
        <!--数据列表-->
        <ul class="mui-table-view mui-table-view-chevron">
          <ul id="box" class="mui-table-view">
          			
          		<audio src="" id="audios"></audio>
          		<!--<li id="lis" class="mui-table-view-cell">
              		<div id="tupian">
              			<img src=""/>
              		</div>      
              		<div id="right">
              			<p class="name"></p>
              		</div>
              		<audio src=""></audio>
                </li>-->
          			
                  <!--<li class="mui-table-view-cell">
                      <a class="mui-navigate-right">
                          Item 1
                      </a>
                  </li>
                  <li class="mui-table-view-cell">
                      <a class="mui-navigate-right">
                           Item 2
                      </a>
                  </li>
                  <li class="mui-table-view-cell">
                      <a class="mui-navigate-right">
                           Item 3
                      </a>
                  </li>-->
              </ul>
        </ul>
      </div>
    </div>
    
    
    <script src="../js/jquery.min.js"></script>
    <script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    mui.init({
    	pullRefresh : {
		    container:refreshContainer,//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
		    up : {
		      height:50,//可选.默认50.触发上拉加载拖动距离
		      auto:true,//可选,默认false.自动上拉加载一次
		      
		      contentrefresh : "拼命加载中...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
		      contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
		      callback :aaa //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
		    }
  		}
    })
    
    function aaa(){
    	mui.get('http://route.showapi.com/213-4',{
    		topid:5,
    		showapi_appid:36577,
    		showapi_sign:'67a7fbfa468542a8bab360e64779b37f',
    	},function(res){
    		console.log(res);
    		if(res&&res.showapi_res_code==0){
    			var data = res.showapi_res_body.pagebean.songlist;
    			for(var i=0; i<data.length; i++){
    				var li = $('<li id="lis" class="mui-table-view-cell" data-url="'+data[i].url+'"><div id="tupian"><img src="'+ data[i].albumpic_big +'"/></div><div id="name"><h5 class="name">'+ data[i].singername +'</h5><p>'+data[i].songname+'</p></div><audio src="'+data[i].url+'"></audio></li>')
    				$('#box').append(li);
    				$('#box').css('background','#6D6D72');
    			}
    			$('#box').on('tap','li',function(){
    				$('#chang').css('display','block');
    				console.log(this);
    			})
    		}
    		mui('#refreshContainer').pullRefresh().enablePullupToRefresh();
    	},'json');
    }
    mui('#box').on('tap','li',function(){
    	var url = this.getAttribute('data-url');
    	//获取 aduio对象
    	var audios = document.querySelector('#audios');
    	audios.src = url;
    	audios.play();
    	
    })
    </script>
</body>
</html>
